<template>
    <div>
        <vantHeader title="详情"></vantHeader>
        <!-- 新闻头部 -->
        <div style="padding:0px 20px;" class="detail_header">
            <h1 class="header_title" style="font-size:2rem;font-weight:400;margin:1rem 0px;">{{ newsDetail.title }}</h1>
            <p style="font-size:16px;display:flex;align-items: center;">
                <span class="read_icon" style="margin-right: 0.5rem;">
                    <van-icon name="eye-o" />
                </span>
                <span class="read_num" style="margin-right: 0.5rem;">{{ newsDetail.viewCount }}</span>
                <span class="read_text" style="margin-right: 0.5rem;">阅读</span>
                <span class="create_date" style="margin-right: 0.5rem;">{{ createDate }}</span>
                <span class="create_time" style="margin-right: 0.5rem;">{{ createTime }}</span>
                <!-- 收藏按钮begin -->
                <span class="collect_button">
                    <a class="collect" v-if="isCollect" @click="unCollectNews(newsDetail)">
                        <van-icon name="like" color="red" size="1.5rem"/>
                    </a>
                    <a class="collect" v-else @click="collectNewsHandler(newsDetail)">
                        <van-icon name='like-o' size="1.5rem"/>
                    </a>
                </span>
                <!-- 收藏按钮end -->
            </p>
        </div>
        <van-divider />
        <!-- 新闻内容 -->
        <div v-html="text" style="text-indent:2rem;padding:0px 20px;margin-bottom: 4rem;">
        </div>
        <!-- 评论列表 -->
        <div class="message">
            <h2 class="title">评论列表</h2>
            <ul class="list">
                <li class="item" v-for="ele in comments">
                    <div class="left">
                        <van-image width="2rem" height="2rem" :src="img_prefix_url + ele.userInfo.imageUrl" />

                    </div>
                    <div class="right">
                        <h2>{{ ele.userName }}</h2>
                        <p class="time">{{ formatTime1(ele.createTime) }}</p>
                        <div class="infos">
                            {{ ele.content }}
                        </div>
                    </div>
                </li>
            </ul>
            <van-pagination @change="getPageComments" v-model="currentPage" :total-items="total"
                :items-per-page="size" />

        </div>
        <div class="markup">
            <h2 class="title">评论</h2>
            <van-form @submit="onSubmit">
                <van-field :disabled="userInfo._id ? false : true" v-model="markup" name="markup" rows="3" autosize
                    type="textarea" maxlength="150" placeholder="请输入留言" show-word-limit />
                <div style="margin: 10px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>
<script src="./new_detail.js"></script>
<style lang="less" scoped>
.detail {
    background-color: #fff;

    margin-bottom: 1.1rem;

    .header {
        background-color: #fff;
        padding: 0.3rem;

        h2 {
            line-height: 1.4;
            font-size: 0.6rem;
            margin-bottom: 0.2rem;
        }

        .info {
            display: flex;
            align-items: center;

            p {
                margin-right: 0.15rem;
            }

            .collect {
                font-size: 0.5rem;
            }

            .red {
                color: #f00;
            }
        }
    }

    .descption {

        border-top: 2px solid #999;

        background-color: #fff;

        padding: 0.3rem;
        line-height: 1.5;
        text-indent: 2em;

        p {
            margin-bottom: 0.1rem;
        }
    }





}

.message {
    padding-top: 1rem;
    background-color: white;
    .title {
        font-size: 1rem;
        margin-left: 0.5rem;
    }

    .list {
        .item {
            margin-top: 1rem;
            padding-bottom: 1rem;
            padding-left: 0.5rem;
            border-bottom: 1px solid #e4e4e4;
            // padding: 0.2rem 0;
            display: flex;
            justify-content: left;
            align-items: center;

            .left {
                // float: left;
                // display: flex;
                // margin-right: 0.3rem;
                width: 2rem;
                height: 2rem;
                border-radius: 50%;
                overflow: hidden;
            }

            .right {
                flex: 1;
                // display: flex;
                // float: right;
                margin-left: 1rem;

                >h2 {
                    font-size: 0.38rem;
                    color: #b8b8b8;
                }

                >p.time {
                    padding: 0.3rem 0;
                    font-size: 0.28rem;

                }

                .infos {
                    line-height: 1.3;
                    color: #000;
                    font-size: 0.3rem;

                    text-overflow: -o-ellipsis-lastline;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-line-clamp: 5;
                    -webkit-box-orient: vertical;

                }

            }

        }
    }
}

.markup {
    padding: 0.3rem;
    margin-bottom: 50px;
    .title {
        font-size: 1.6rem;
        padding: 1.3rem 0;
    }

}
</style>